<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>氮转化速率计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #eef2f3;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: auto;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
        h2 {
            text-align: center;
            color: #333;
        }
        .formula {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #f9f9f9;
        }
        h3 {
            margin-top: 0;
            color: #4CAF50;
        }
        input[type="number"] {
            width: calc(100% - 22px);
            padding: 12px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: block;
            width: 100%;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        .result {
            margin-top: 10px;
            padding: 12px;
            background-color: #e7f3fe;
            border-left: 6px solid #2196F3;
            color: #333;
            font-size: 16px;
            border-radius: 4px;
        }
        .hint {
            font-size: 12px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>氮转化速率计算器</h2>
        
        <div class="formula">
            <h3>1. 总矿化速率 (m₁)</h3>
            <input type="number" id="NH4Plus_t" placeholder="输入 [NH₄⁺] t (ug N g⁻¹)">
            <input type="number" id="NH4Plus_0" placeholder="输入 [NH₄⁺] 0 (ug N g⁻¹)">
            <input type="number" id="time_m1" placeholder="输入时间 (小时)">
            <button onclick="calculateM1()">计算 m₁</button>
            <div id="resultM1" class="result"></div>
            <div class="hint">提示: 输入当前时间和初始时间的NH₄⁺浓度。</div>
        </div>

        <div class="formula">
            <h3>2. 初级NH₄⁺消耗速率 (c₁)</h3>
            <input type="number" id="NH4Plus_t_c1" placeholder="输入 [NH₄⁺] t (ug N g⁻¹)" value="" readonly>
            <input type="number" id="time_c1" placeholder="输入时间 (小时)">
            <button onclick="calculateC1()">计算 c₁</button>
            <div id="resultC1" class="result"></div>
            <div class="hint">提示: 输入计算的m₁和时间。</div>
        </div>

        <div class="formula">
            <h3>3. 总硝化速率 (m₂)</h3>
            <input type="number" id="NO3_t" placeholder="输入 [NO₃⁻] t (ug N g⁻¹)">
            <input type="number" id="NO3_0" placeholder="输入 [NO₃⁻] 0 (ug N g⁻¹)">
            <input type="number" id="time_m2" placeholder="输入时间 (小时)">
            <button onclick="calculateM2()">计算 m₂</button>
            <div id="resultM2" class="result"></div>
            <div class="hint">提示: 输入当前时间和初始时间的NO₃⁻浓度。</div>
        </div>

        <div class="formula">
            <h3>4. 初级NO₃⁻消耗速率 (c₂)</h3>
            <input type="number" id="NO3_t_c2" placeholder="输入 [NO₃⁻] t (ug N g⁻¹)">
            <input type="number" id="time_c2" placeholder="输入时间 (小时)">
            <button onclick="calculateC2()">计算 c₂</button>
            <div id="resultC2" class="result"></div>
            <div class="hint">提示: 输入计算的m₂和时间。</div>
        </div>

        <div class="formula">
            <h3>5. NH₄⁺残留时间 (r₁)</h3>
            <input type="number" id="NH4_0_r1" placeholder="输入 [NH₄⁺] 0 (ug N g⁻¹)">
            <input type="number" id="c1_r1" placeholder="输入 c₁ (ug N g⁻¹ d⁻¹)">
            <button onclick="calculateR1()">计算 r₁</button>
            <div id="resultR1" class="result"></div>
            <div class="hint">提示: 输入NH₄⁺的初始浓度和c₁。</div>
        </div>

        <div class="formula">
            <h3>6. NO₃⁻残留时间 (r₂)</h3>
            <input type="number" id="NO3_0_r2" placeholder="输入 [NO₃⁻] 0 (ug N g⁻¹)">
            <input type="number" id="c2_r2" placeholder="输入 c₂ (ug N g⁻¹ d⁻¹)">
            <button onclick="calculateR2()">计算 r₂</button>
            <div id="resultR2" class="result"></div>
            <div class="hint">提示: 输入NO₃⁻的初始浓度和c₂。</div>
        </div>

        <div class="formula">
            <h3>7. 来源于NH₄⁺库的¹⁵N通量 (l₁)</h3>
            <input type="number" id="NH4_av_l1" placeholder="输入 [¹⁵NH₄⁺] 平均值 (ug ¹⁵N g⁻¹)">
            <input type="number" id="time_l1" placeholder="输入时间 (小时)">
            <input type="number" id="r1_l1" placeholder="输入 r₁ (天)">
            <button onclick="calculateL1()">计算 l₁</button>
            <div id="resultL1" class="result"></div>
            <div class="hint">提示: 输入NH₄⁺的¹⁵N平均浓度和r₁。</div>
        </div>

        <div class="formula">
            <h3>8. 来源于NO₃⁻库的¹⁵N通量 (l₂)</h3>
            <input type="number" id="NO3_av_l2" placeholder="输入 [¹⁵NO₃⁻] 平均值 (ug ¹⁵N g⁻¹)">
            <input type="number" id="time_l2" placeholder="输入时间 (小时)">
            <input type="number" id="r2_l2" placeholder="输入 r₂ (天)">
            <button onclick="calculateL2()">计算 l₂</button>
            <div id="resultL2" class="result"></div>
            <div class="hint">提示: 输入NO₃⁻的¹⁵N平均浓度和r₂。</div>
        </div>

        <div class="formula">
            <h3>9. DNRA通量</h3>
            <input type="number" id="NH4_t_dnra" placeholder="输入 [NH₄⁺] t (ug N g⁻¹)">
            <input type="number" id="NH4_0_dnra" placeholder="输入 [NH₄⁺] 0 (ug N g⁻¹)">
            <input type="number" id="NO3_av_dnra" placeholder="输入 [NO₃⁻] 平均值 (ug N g⁻¹)">
            <input type="number" id="time_dnra" placeholder="输入时间 (小时)">
            <button onclick="calculateDNRA()">计算 DNRA</button>
            <div id="resultDNRA" class="result"></div>
            <div class="hint">提示: 输入NH₄⁺和NO₃⁻的浓度。</div>
        </div>
    </div>

    <script>
        function calculateM1() {
            const NH4Plus_t = parseFloat(document.getElementById('NH4Plus_t').value);
            const NH4Plus_0 = parseFloat(document.getElementById('NH4Plus_0').value);
            const time_m1 = parseFloat(document.getElementById('time_m1').value);
            const result = ((NH4Plus_t - NH4Plus_0) / time_m1) * Math.log(NH4Plus_0 / NH4Plus_t); // 示例公式
            document.getElementById('resultM1').innerText = `结果: ${result.toFixed(4)} (ug N g⁻¹ d⁻¹)`;
            // 设置初级NH₄⁺消耗速率的输入值
            document.getElementById('NH4Plus_t_c1').value = NH4Plus_t; // 自动填充
        }

        function calculateC1() {
            const m1 = parseFloat(document.getElementById('resultM1').innerText.split(': ')[1]);
            const NH4Plus_t = parseFloat(document.getElementById('NH4Plus_t_c1').value);
            const time_c1 = parseFloat(document.getElementById('time_c1').value);
            const result = m1 - ((NH4Plus_t - NH4Plus_0) / time_c1); // 示例公式
            document.getElementById('resultC1').innerText = `结果: ${result.toFixed(4)} (ug N g⁻¹ d⁻¹)`;
        }

        function calculateM2() {
            const NO3_t = parseFloat(document.getElementById('NO3_t').value);
            const NO3_0 = parseFloat(document.getElementById('NO3_0').value);
            const time_m2 = parseFloat(document.getElementById('time_m2').value);
            const result = ((NO3_t - NO3_0) / time_m2) * Math.log(NO3_0 / NO3_t); // 示例公式
            document.getElementById('resultM2').innerText = `结果: ${result.toFixed(4)} (ug N g⁻¹ d⁻¹)`;
        }

        function calculateC2() {
            const m2 = parseFloat(document.getElementById('resultM2').innerText.split(': ')[1]);
            const NO3_t = parseFloat(document.getElementById('NO3_t_c2').value);
            const time_c2 = parseFloat(document.getElementById('time_c2').value);
            const result = m2 - ((NO3_t - NO3_0) / time_c2); // 示例公式
            document.getElementById('resultC2').innerText = `结果: ${result.toFixed(4)} (ug N g⁻¹ d⁻¹)`;
        }

        function calculateR1() {
            const NH4_0 = parseFloat(document.getElementById('NH4_0_r1').value);
            const c1 = parseFloat(document.getElementById('c1_r1').value);
            const result = NH4_0 / c1; // 示例公式
            document.getElementById('resultR1').innerText = `结果: ${result.toFixed(4)} (天)`;
        }

        function calculateR2() {
            const NO3_0 = parseFloat(document.getElementById('NO3_0_r2').value);
            const c2 = parseFloat(document.getElementById('c2_r2').value);
            const result = NO3_0 / c2; // 示例公式
            document.getElementById('resultR2').innerText = `结果: ${result.toFixed(4)} (天)`;
        }

        function calculateL1() {
            const NH4_av = parseFloat(document.getElementById('NH4_av_l1').value);
            const time_l1 = parseFloat(document.getElementById('time_l1').value);
            const r1 = parseFloat(document.getElementById('r1_l1').value);
            const result = (NH4_av * time_l1) / r1; // 示例公式
            document.getElementById('resultL1').innerText = `结果: ${result.toFixed(4)} (ug ¹⁵N g⁻¹)`;
        }

        function calculateL2() {
            const NO3_av = parseFloat(document.getElementById('NO3_av_l2').value);
            const time_l2 = parseFloat(document.getElementById('time_l2').value);
            const r2 = parseFloat(document.getElementById('r2_l2').value);
            const result = (NO3_av * time_l2) / r2; // 示例公式
            document.getElementById('resultL2').innerText = `结果: ${result.toFixed(4)} (ug ¹⁵N g⁻¹)`;
        }

        function calculateDNRA() {
            const NH4_t = parseFloat(document.getElementById('NH4_t_dnra').value);
            const NH4_0 = parseFloat(document.getElementById('NH4_0_dnra').value);
            const NO3_av = parseFloat(document.getElementById('NO3_av_dnra').value);
            const time_dnra = parseFloat(document.getElementById('time_dnra').value);
            const result = 100 * ((NH4_t - NH4_0) / (NO3_av * time_dnra)); // 示例公式
            document.getElementById('resultDNRA').innerText = `结果: ${result.toFixed(4)} (ug N g⁻¹ d⁻¹)`;
        }
    </script>
</body>
</html>